<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app1"></div>
    <div id="app2"></div>
    <hr/>
    <div id="app3"></div>
    <script src="../react-lib/babel.min.js"></script>
    <script src="../react-lib/react.development.js"></script>
    <script src="../react-lib/react-dom.development.js"></script>
    <script type="text/babel">
        // 1. 定义组件
        // 方法1：工厂函数组件（简单组件：没有状态）
        function MyComponent1() {
            return <h1>MyComponent</h1>
        }
        // 方法2：类组件（复杂组件）
        class MyComponent2 extends React.Component{
            render(){
                console.log(this)
                return <h1>MyComponent2</h1>
            }
        }
        // 2.渲染组件
        ReactDOM.render(<MyComponent1/>,document.getElementById('app1'))
        ReactDOM.render(<MyComponent2/>,document.getElementById('app2'))
    </script>
    <script type="text/babel">
    /**
    * 
    */
     class Change extends React.Component{
         constructor(props){
             super(props)
             // 1.设置state初始值
             this.state = {
                 isChange: false
             }

             // 绑定自定义方法到当前组件上，推荐写法，只会使用一次
             // 最终写法使用箭头函数，当前示例不支持
             this.handleClick = this.handleClick.bind(this)
         }
         // 重写组件能方法
        render(){
            // 指定onClick要调用方法的应用，注意！不是直接调用
            // 绑定方法还可以使用onClick={this.handleClick.bind(this)},由于每次点击都会听过bind函数产生新方法，使得性能降低，故不推荐使用

            // 2. 地区状态
            return <h1 onClick={this.handleClick}>{this.state.isChange?'A.':'B.'}</h1>
        }

        // 新增方法，默认this不是组件对象，而是undefined
        handleClick(){
            console.log(this)
            // 3. 更新状态
            this.setState({isChange:!this.state.isChange})
        }
    }
    ReactDOM.render(<Change/>,document.getElementById('app3'))
    </script>
</body>
</html>